<template>
  <div
    class="grimm-tab"
    :class="[isActive ? showCard : '']"
    @click="handleClick"
    :label="label"
    :value="value"
  >
    <slot name="icon">
      <i :class="icon"></i>
    </slot>
    <slot v-if="showTitle">
      <div v-html="label"></div>
    </slot>
  </div>
</template>
<script type="text/ecmascript-6">
const COMPONENT_NAME = 'grimm-tab';

export default {
  name: COMPONENT_NAME,
  props: {
    label: {
      type: [String, Number],
      required: true,
    },
    value: {
      type: [String, Number],
      required: true,
    },
    showTitle: {
      type: Boolean,
      default: true,
    },
    icon: {
      type: String,
      default: '',
    },
    showOneLevelCard: {
      type: Boolean,
      default: false,
    },
    showSecondLevelCard: {
      type: Boolean,
      default: false,
    },
  },
  mounted() {
    this.$parent.addTab(this);
  },
  destroyed() {
    this.$parent.removeTab(this);
  },
  computed: {
    isActive() {
      return this.$parent.value === this.value;
    },
    showCard() {
      let style = '';
      if (this.$parent.showOneLevelCard) {
        style = 'grimm-tab-large-card';
      } else if (this.$parent.showSecondLevelCard) {
        style = 'grimm-tab-small-card';
      } else {
        style = 'grimm-tab-active';
      }
      return style;
    },
  },
  methods: {
    handleClick(e) {
      this.$parent.trigger(this.label, this.value);
    },
  },
};
</script>
